<div class="user-info clear-fix">
    <img src="<%= userInfo.picture%>" class="header-img float-left"/>
    <h4 class="user-name"><%= userInfo.nickName%></h4>
</div>

<% if (isMe) { %>
    <%# 是当前登录用户%>
    <p class="bold margin-top-10">
        <a href="/at-me">
            @提到我的 (<%= locals.atCount%>)
        </a>
    </p>
<% } else { %>
    <%# 不是当前登录用户%>
    <p class="margin-top-10">
        <button id="btn-un-follow" class="btn btn-light" style="display: none;">取消关注</button>
        <button id="btn-follow" class="btn btn-primary" style="display: none;">关注</button>
    </p>
<% } %>

<script>
$(function () {
    // 当前用户 id
    var curUserId = <%= userInfo.id%> ;

    // 按钮，显示和隐藏
    var $btnFollow = $('#btn-follow')
    var $btnUnFollow = $('#btn-un-follow')
    if (<%= !isMe%>) {
        // 不是当前用户，则显示“关注”或者“取消关注”
        if (<%= locals.amIFollowed%>) {
            $btnUnFollow.show()
        } else {
            $btnFollow.show()
        }
    }

    // 关注此人
    $btnFollow.click(function () {
        ajax.post('/api/profile/follow', {
            userId: curUserId
        }, function (err) {
            if (err) {
                alert(err)
                return
            }
            // 关注成功
            $btnFollow.hide()
            $btnUnFollow.show()
        })
    })

    // 取消关注
    $btnUnFollow.click(function () {
        if (confirm('确定取消关注？') === false) {
            return
        }
        ajax.post('/api/profile/unFollow', {
            userId: curUserId
        }, function (err) {
            if (err) {
                alert(err)
                return
            }
            // 取消成功
            $btnFollow.show()
            $btnUnFollow.hide()
        })
    })
})
</script>
